
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- <script src="js/vue.js"></script> -->
    <script src="../../js/vue.js"></script>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">

    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="../../plugins/morris/morris.css">
    <link rel="stylesheet" href="../../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="../../plugins/select2/select2.css">
    <link rel="stylesheet" href="../../plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>


</head>
<style>

</style>

<body>

<div id="app">
    <el-input v-model="searchText" placeholder="请输入搜索内容" style="width: 200px"
              @keyup.enter="handleSearch"></el-input>
    <el-select v-model="searchType" placeholder="选择搜索类型" style="width: 150px">
        <el-option label="按账号搜索" value="username"></el-option>
        <el-option label="按姓名" value="name"></el-option>
    </el-select>
    <el-button type="primary" @click="handleSearch">搜索</el-button>


    <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
        <thead>
        <tr>
            <th class="text-center sorting">账号</th>
            <th class="text-center sorting">姓名</th>
            <th class="text-center sorting">邮箱</th>
            <th class="text-center sorting">手机号</th>
            <th class="text-center sorting">密码</th>
            <th class="text-center sorting">可借阅天数</th>
            <th class="text-center sorting">最大借阅数</th>
            <th class="text-center sorting">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(brand,index) in brands">
            <td class="text-center sorting">{{brand.username}}</td>
            <td class="text-center sorting">{{brand.name}}</td>
            <td class="text-center sorting">{{brand.email}}</td>
            <td class="text-center sorting">{{brand.phone}}</td>
            <td class="text-center sorting">{{brand.password}}</td>
            <td class="text-center sorting">{{brand.lend_num}}</td>
            <td class="text-center sorting">{{brand.max_num}}</td>
            <td class="text-center sorting" v-if="brand.status==1">
                <el-button round  type="danger" v-on:click="delectById(brand.aid)">加入黑名单</el-button>

                <el-button round  type="primary" v-on:click="updateById(brand.aid)">修改</el-button>
            </td>
            <td class="text-center sorting" v-if="brand.status==2">
                <el-button round  type="primary" v-on:click="updateUserStatusById(brand.aid)">移除黑名单</el-button>
                <el-button round  type="primary" v-on:click="updateById(brand.aid)">修改</el-button>
            </td>
        </tr>
        </tbody>
    </table>


    <!--        <el-table-column label="账号状态(打开为锁定)">-->
    <!--            <template slot-scope="scope">-->
    <!--                <el-switch v-model="scope.row.isStatusTrue"-->
    <!--                           @change="handleSwitchChange(scope.row)"></el-switch>-->
    <!--            </template>-->
    <!--        </el-table-column>-->


    <!--    class="pageList"-->
    <div class="box-footer">
        <div class="pull-left">
            <div class="form-group form-inline">
                总共{{pages}} 页，共{{total}} 条数据。 每页
                <select class="form-control" v-model="meiye">
                    <option>10</option>
                    <option>15</option>
                    <option>20</option>
                    <option>50</option>
                    <option>80</option>
                </select> 条
            </div>
        </div>

        <div class="box-tools pull-right">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous" v-on:click="goPage(1)">首页</a>
                </li>
                <li><a href="#" v-on:click="goPage(pageNum-1==0?1:pageNum-1)">上一页</a></li>
                <li v-for="index in (pages>=7)?(7):(pages)"
                    class="paginate_button">
                    <a href="#" @click="goPage(index)">{{index}}</a></li>
                <li><a href="#" @click="goPage(pageNum+1>=pages?pages:pageNum+1)">下一页</a></li>

            </ul>
        </div>

    </div>

</div>
</body>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                brands:[],
                total: "",
                pages: "",
                pageNum: "",
                size: "",
                meiye:10,
                searchText:'',
                searchType:'',
            }
        },
        mounted(){
            var _this=this;
            axios({
                method:"get",
                url:"http://localhost:8080/web/selectreader"
            }).then(function(resp){
                _this.brands=resp.data.list;
                _this.total = resp.data.total;
                _this.pages = resp.data.pages;
                _this.pageNum = resp.data.pageNum;
                _this.size = resp.data.size;
            })
        },
        methods: {
            handleSearch(){
                var _this=this;
                var aa={
                    "type":this.searchType,
                    "text":this.searchText
                }
                var jsonstr = JSON.stringify(aa);
                axios({
                    method:"post",
                    url:"http://localhost:8080/web/readerConditionalQuery",
                    data:jsonstr
                }).then(function (resp){
                    _this.brands = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            updateUserStatusById(aid){
                axios({
                    method:"post",
                    url: "http://localhost:8080/web/admin/updateUserStatusById",
                    data: "aid="+aid
                }).then(function(resp){
                    location.reload();
                })
            },
            delectById(aid){
                axios({
                    method:"post",
                    url: "http://localhost:8080/web/delectById",
                    data: "aid="+aid
                }).then(function(resp){
                    location.reload();
                })
            },
            updateById(aid){
                //网页跳转
                window.location.href="http://localhost:8080/web/html/admin/updatereader.html?aid="+aid;//这个id通过地址栏的方式把参数带给下一个界面
            },
            goPage(index) {
                var _this = this;
                // 页面加载完成后，发送异步请求，查询数据
                var aa={
                    "type":_this.searchType,
                    "text":_this.searchText,
                    "page":index
                }
                var jsonstr = JSON.stringify(aa);
                axios({
                    method: "post",
                    url: "http://localhost:8080/web/selectreader" ,
                    data:jsonstr
                }).then(function (resp) {
                    _this.brands = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },
            goPage(index) {
                var _this = this;
                // 页面加载完成后，发送异步请求，查询数据
                var aa={
                    "type":_this.searchType,
                    "text":_this.searchText,
                    "page":index,
                    "size":_this.meiye
                }
                var jsonstr = JSON.stringify(aa);
                axios({
                    method: "post",
                    url: "http://localhost:8080/web/selectreader",
                    data:jsonstr
                }).then(function (resp) {
                    _this.brands = resp.data.list;
                    _this.total = resp.data.total;
                    _this.pages = resp.data.pages;
                    _this.pageNum = resp.data.pageNum;
                    _this.size = resp.data.size;
                })
            },

        }

    })


</script>


</html>